import React from 'react';
import { Table, Icon, Tooltip, Modal, Popover } from 'antd';
import { ColumnProps } from 'antd/lib/table';
import { observer } from 'mobx-react';
import store from '../store';
import { FileApi, ShareUrl } from '../../manger/net-api';
import QRCode from 'qrcode.react';
import { hostname } from 'os';

const { confirm } = Modal;

export interface DataSource {
  key?: string | null;
  version?: string | null;
  size?: string | null;
  build?: number | null;
  action?: Array<string>;
  time?: string | null;
  desc?: string;
  id?: number;
  filePath?: string;
}

interface HomeTableProps {
  dataSourceList: DataSource[];
}

interface HomeTableState {
  appInfoList: DataSource[];
}

@observer
export default class HomeTable extends React.Component<HomeTableProps, any> {
  constructor(props) {
    super(props);
    // this.state = {
    //   appInfoList:[]
    // }
  }
  columns: ColumnProps<DataSource>[] = [
    {
      title: '版本号',
      dataIndex: 'version',
      key: '1',
      render: text => <span>{text}</span>,
      width: 100,
    },
    {
      title: 'Build',
      dataIndex: 'build',
      key: '2',
      width: 60,
    },
    {
      title: '大小',
      dataIndex: 'size',
      key: '3',
      width: 60,
    },
    {
      title: '上传时间',
      dataIndex: 'time',
      key: '4',
      width: 100,
      render: (t, v) => <span style={{ fontSize: 13 }}>{v.time}</span>,
    },
    {
      title: '描述',
      dataIndex: 'desc',
      key: '5',
      width: 200,
      render: (t, v) => <span style={{ fontSize: 13 }}>{v.desc}</span>,
    },
    {
      title: '操作',
      key: '6',
      dataIndex: 'action',
      width: 100,
      render: (text, record) => (
        <span>
          <Popover
            content={
              <QRCode
                value={ShareUrl + `/?type=${store.systemType}&id=${record.id}`}
                size={100}
              />
            }
          >
            <Icon type={'eye'} />
          </Popover>
          <Tooltip autoAdjustOverflow={true} placement="top" title="下载">
            <a href={FileApi(record.filePath)} download={'app文件'}>
              <Icon
                style={{ marginLeft: 10, marginRight: 10 }}
                type={'download'}
              />
            </a>
          </Tooltip>
          <Tooltip autoAdjustOverflow={true} placement="top" title="删除">
            <a onClick={() => this.showConfirm(record.id)}>
              <Icon type={'delete'} />
            </a>
          </Tooltip>
        </span>
      ),
    },
  ];

  showConfirm(idnex: number) {
    confirm({
      title: '提示?',
      content: '是否删除记录',
      onOk: () => {
        store.removeAppWithId(idnex);
      },
      onCancel() {},
    });
  }

  componentDidMount() {}

  render() {
    let sourceList = this.props.dataSourceList;
    return (
      <div style={{ backgroundColor: 'white', padding: 1 }}>
        <Table
          pagination={false}
          bordered={true}
          columns={this.columns}
          dataSource={sourceList}
          scroll={{ x: 400, y: store.windowHeight - 300 }}
        />
      </div>
    );
  }
}
